<template>
	<view class="goods-item">
		<goods-list :hotGoods="goods" @goodHandle="goodsDetail"></goods-list>
		<view class="bottm-title" v-if="flag">----我是有底线的----</view>
	</view>
</template>

<script>
	import GoodsList from '@/components/GoodsList.vue'
	export default {
		data() {
			return {
				goods: [],
				pageIndex: 1,
				flag: false
			}
		},
		components: {
			GoodsList
		},
		created() {
			this.getGoodsList()
		},
		onPullDownRefresh() {
			// 下拉刷新
			this.pageIndex = 1
			this.goods = []
			this.flag = false
			setTimeout(() => {
				this.getGoodsList(() => {
					uni.stopPullDownRefresh()
				})
			}, 1000)
		},
		onReachBottom() {
			if(this.goods.length < this.pageIndex * 10) return this.flag = true
			this.pageIndex++
			this.getGoodsList()
		},
		methods: {
			async getGoodsList(callback) {
				const res = await this.$http({
					url: '/getgoods?pageindex=' + this.pageIndex
				})
				this.goods = [...this.goods, ...res.data.message]
				callback && callback()
			},
			// 跳转到商品详情页
			goodsDetail(id) {
				uni.navigateTo({
					url: '/pages/goods-detail/goods-detail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.goods-item {
		background-color: #eee;
	}
	.bottm-title {
		text-align: center;
	}
</style>
